<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>向表中添加内容</title>
    <script type="text/javascript">
        function method01(){
            //创建出tr元素的节点
            var textIdElement=document.getElementById('id');
            var textNameElement=document.getElementById('name');
            //步骤1：创建好两个td
            var idTdElement=document.createElement('td');
            var nameTdElement=document.createElement('td');
            idTdElement.innerHTML=textIdElement.value;
            nameTdElement.innerHTML=textNameElement.value;
            //步骤2：创建tr
            var trElement=document.createElement('tr');
            trElement.setAttribute('align','center');
            trElement.appendChild(idTdElement);
            trElement.appendChild(nameTdElement);
            //把tr元素节点放到html代码里
            var tableElement=document.getElementById('mytable');
            tableElement.appendChild(trElement);
            //清除信息
            textIdElement.value='';
            textNameElement.value='';
            textIdElement.focus();
        }
    </script>
</head>
<body>
<center>
新的编号：<input type="text" id="id">&nbsp;&nbsp;&nbsp;
新的姓名：<input type="text" id="name">&nbsp;&nbsp;&nbsp;
    <input type="button" value="增加" onclick="method01()">
</center>
<hr>
<table id="mytable" border="1" width="60%" cellpadding="0" cellspacing="0" align="center">
    <tr align="center">
        <td>编号</td>
        <td>姓名</td>
    </tr>
</table>
</body>
</html>